<template>
	<div>
		<!-- <div class="weui_search_bar" :class="{weui_search_focusing:isFocus}">
		    <div class="weui_search_outer">
		        <div class="weui_search_inner">
		            <i class="ion ion-ios-search"></i>
		            <input type="text" class="weui_search_input" name="searchParam" ref="searchInput" placeholder="搜索" required="" @blur="searchBlur" >
		            <a href="javascript:" class="ion ion-ios-close" @click="searchClear"></a>
		        </div>
		        <label for="search_input" class="weui_search_text" @click='searchFocus'>
		            <i class="ion ion-ios-search"></i>
		            <span>搜索</span>
		        </label>
		    </div>
		    <a href="javascript:" class="weui_search_cancel" @click="searchCancel">取消</a>
		</div> -->
		<ul class="items mt10" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<router-link tag="li" class="has_right_attach" :to="{path:'/getApprovalDetail',query:{personType:personType,applyStatus:list.applyStatus,id:list.id,empNo:empNo}}" v-for="list of approvalData">
				<span class="fc_green" v-if="list.appName && personType=='01'">[{{list.appName}}]</span>
				<span class="fc_green" v-if="list.repName && personType=='02'">[{{list.repName}}]</span>
				<!-- <span>{{list.dateFrom}} - {{list.dateTo}}</span> -->
				<span>{{list.dateFrom}}</span>
				<span class="attach button" :class="list.statusClass">{{list.applyStatusValue}}</span>
			</router-link>
			<li class="no_data" v-if="hasNoData">
				<i class="ion ion-ios-paper-outline"></i>
				<p>暂无数据</p>
			</li>
			<!-- <li class="has_right_attach">
				<span class="fc_green">[name]</span>
				<span>2017</span>
				<span class="attach button btn_pri">待申请</span>
			</li>
			<li class="has_right_attach">
				<span class="fc_green">[name]</span>
				<span>2017</span>
				<span class="attach button btn_red">未通过</span>
			</li>
			<li class="has_right_attach">
				<span class="fc_green">[name]</span>
				<span>2017</span>
				<span class="attach button btn_blue">已审批</span>
			</li>
			<li class="has_right_attach">
				<span class="fc_green">[name]</span>
				<span>2017</span>
				<span class="attach button btn_orange">未审批</span>
			</li>
			<li class="has_right_attach">
				<span class="fc_green">[name]</span>
				<span>2017</span>
				<span class="attach button btn_disabled">已过期</span>
			</li> -->
		</ul>
	</div>
</template>
<script type="text/javascript">
	import getInterface from '../../assets/js/insterface'
	export default{
		data(){
			return{
				'empNo':this.$route.query.empNo,
				'personType':'',//01审批人 | 02驾驶人
				'isFocus':false,
				'busy':false,
				'count':0,
				'pageTotal':"",
				'hasNoData':false,
				'approvalData':[]
			}
		},
		mounted(){
			this.$el.parentElement.parentNode.style.background = '#fafafa';
			document.title="夜驾管理";
			this.getApprovalData();
		},
		methods:{
			loadMore(){
				let vue = this;
				this.busy = true;
				if(this.count<this.pageTotal){
					setTimeout(()=>{
						vue.getApprovalData();
					},1000)
				}
			},
			getApprovalData(){
				let approvalListUrl = getInterface.getApprovalListUrl;
				let params={
					pageSize:10,
					currentPage:this.count,
					empNum:this.$route.query.empNo
				}
				this.$http.post(approvalListUrl,params,{emulateJSON: true})
				.then((response) =>{
					console.log(response);

					if(response.data.resType=="00"){

						let responseData = response.data.data;
						let resDataLen = responseData.length;
						this.pageTotal = response.data.pages;
						if(resDataLen>0){
							this.hasNoData = false;

							if(this.pageTotal > this.count){
								for(let i=0; i<resDataLen; i++){
									this.approvalData.push(responseData[i])
								}
								this.count++;
							}
							if(response.data.typeName=="01"){//01审批人
								this.personType = "01";

								for(let listVal of this.approvalData){
									switch(listVal.applyStatus){
										case "01"://未批复
											listVal.applyStatusValue = "待审批";
											listVal.statusClass="btn_pri";
											break;
										case "02"://同意
											listVal.applyStatusValue = "已通过";
											listVal.statusClass="btn_blue";
											break;
										case "03"://拒绝
											listVal.applyStatusValue = "未通过";
											listVal.statusClass="btn_red";
											break;
										case "04"://已过期
											listVal.applyStatusValue = "已过期";
											listVal.statusClass="btn_disabled";
											break;
									}
								}
							}
							if(response.data.typeName=="02"){//02驾驶人
								this.personType = "02";
								for(let listVal of this.approvalData){
									switch(listVal.applyStatus){
										case "00"://未申请
											listVal.applyStatusValue = "待申请";
											listVal.statusClass="btn_pri";
											break;
										case "01"://未批复
											listVal.applyStatusValue = "审批中";
											listVal.statusClass="btn_orange";
											break;
										case "02"://同意
											listVal.applyStatusValue = "已通过";
											listVal.statusClass="btn_blue";
											break;
										case "03"://拒绝
											listVal.applyStatusValue = "未通过";
											listVal.statusClass="btn_red";
											break;
										case "04"://已过期
											listVal.applyStatusValue = "已过期";
											listVal.statusClass="btn_disabled";
											break;
									}
								}
							}
						}else{
							this.hasNoData = false;
						}
					}else{
						this.hasNoData = true;
					}
					this.busy = false;
				})
			}
		}

	}
</script>